<template>
  <div class="index" v-loading="loading">
      <div class="wrap">
          <div class="crumbs flex">
            <router-link to="/" class="p">首页</router-link>
            <router-link class="p" :to="parent.path" v-if="parent.meta">>{{ parent.meta.title }}</router-link>
            <div class="p">>{{title}}</div>
          </div>
          <div class="service-title">
              <h2>服务联盟</h2>
              <p>Service Alliance</p>
          </div>
          <div class="nav flex-jus">
            <li class="on" @click="togNav('/service')">服务商超</li>
            <li @click="togNav('/service/product')">人才服务</li>
            <li @click="togNav('/service/enterprise')">企业大学</li>
            <li @click="togNav('/service/activity')">活动</li>
          </div>
          <div class="list flex-bett flex-wrap">
            <div>
              <div class="list-title"></div>
              <div class="list-content">
                <div class="list-left">
                  <div v-for="(item,index) in navlist1" :key="index" :class="navclick == item.index? 'list-nav nav-click':'list-nav'" @click="listnav(item.index)">
                    <span>{{item.label}}</span>
                    <span :class="navclick == item.index? 'left_angle angel-click':'left_angle'"></span>
                  </div>
                </div>
                <div class="list-right" >
                  <div v-if="list.length == 0" style="width:95%;text-align:center;background:#ccc;margin:20px auto;color:#fff;padding:5px">暂无数据</div>
                  <div class="list-item" v-for="(item,index) in list" :key="index" @click="togNav('/service/details?id='+item.id)">
                    <div class="list-item-img">
                      <img :src="item.imgUrl" alt="" srcset="" width="200px" height="100px">
                    </div>
                    <div class="list-item-right">
                      <div><p class="list-item-title">{{item.title}}</p></div>
                      <div><p class="list-item-intro">{{item.abstractDesc}}</p></div>
                    </div>
                  </div>
                </div>
                <div class="list-left">
                  <div v-for="(item,index) in navlist2" :key="index" :class="navclick == item.index? 'list-nav nav-click':'list-nav'" @click="listnav(item.index)">
                    <span>{{item.label}}</span>
                    <span :class="navclick == item.index? 'left_angle2 angel-click':'left_angle2'"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
      <serviceBox></serviceBox>
      <serviceLogo></serviceLogo>
      
  </div>
</template>
<script>
// import Header from '@/views/components/header/header'
import serviceBox from '@/views/components/service/service-box'
import serviceLogo from '@/views/components/service/service-logo'
import {findUserAllList,getInfomationDetail} from '@/api/service/service'
export default {
  name: "index",
  data() {
    return {
      //bigCategory   8:服务商超   10：企业大学
        parent:{},                      //获取父路由信息
        title:"",
        img:require("../../assets/image/profile.jpg"),
        total:0,
        navclick:1210, //当前选择nav
        navlist1:[
          {label:'创业服务',index:1210},
          {label:'管理咨询服务',index:1213},
          {label:'培训服务',index:1214},
          {label:'法律服务',index:1215},
          {label:'投融资服务',index:1216},
        ],// nav数据
        navlist2:[
          {label:'人力资源服务',index:1217},
          {label:'科技类服务',index:1218},
          {label:'商贸类服务',index:1219},
          {label:'建筑业服务',index:1220},
          {label:'综合服务',index:1221},
        ],// nav数据
        list:[],                            //列表数据
        loading:false,
        route:{}
    }
  },
  components:{serviceBox,serviceLogo},
  created() {
    
  },
  mounted(){
      this.route = this.$route;
      this.parent = this.$route.matched[0];
      this.title = this.$route.meta.title;
      this.findUserAllList()
      //this.getInfomationDetailapi()
  },
  methods:{
    // 选择nav
    listnav(index){
      this.navclick = index
      this.findUserAllList()
    },
    togNav(e){
      this.$router.push(e)
    },
    findUserAllList(){
      this.loading = true;
      const params = {bigCategory:8,serviceType:this.navclick}
      findUserAllList(params).then(res=>{
        this.loading = false;
        if(res.code === 0){
          this.list = res.data;
        }
      })
    },
    renderTime(date) {
        let arr = [];
        var dateee = new Date(date)
        arr.push(dateee.getFullYear())
        arr.push(dateee.getMonth()+1)
        arr.push(dateee.getDate())
        return arr;
    },
  }
}
</script>
<style scoped>
.index{
  background: #fff;
}
.crumbs{
    padding: 10px 0;
}
.crumbs .p{
    font-size: 14px;
}

.nav {
  padding: 25px 0;
}
.nav li{
  font-size: 16px;
  color: #343434;
  line-height: 20px;
  padding: 0 15px;
  transition:all .5s;
  cursor:pointer;
}
.nav li.on{
  color: #CE3A5C;
}
.nav li:hover{
  color: #CE3A5C;
}
.list{
  padding: 30px 0 40px 0;
  position: relative;
}
.list::after{
  content: " ";
  width: 387px;
  height: 0;
}
.list .box1-li{
  width: 387px;
  background: #FFFFFF;
  min-height: 100px;
  box-shadow: 1px 23px 53px 18px rgba(83, 108, 187, 0.05);
  margin-bottom: 20px;
  cursor:pointer
}
.list .box1-li .img{
  width: 387px;
  height: 195px;
}
.list .box1-li .content{
  padding: 20px 5px 35px 5px;
  color: #343434;
  overflow: hidden;
}
.list .box1-li .content .left{
  padding:0 15px;
  border-right: 2px solid #E2E2E2;
  flex-grow:0;
  flex-shrink:0;
  
}
.list .box1-li .content .left .date-t{
  font-size: 20px;
  line-height: 30px;
}
.list .box1-li .content .left .date-y{
  font-size: 15px;
  line-height: 24px;
  padding-top: 2px;
}
.list .box1-li .content .right{
  flex: 1;
  padding-left: 10px;
  overflow: hidden;
}
.list .box1-li .content .right .box1-li-title{
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.list .box1-li .content .right .box1-li-p{
  width: 100%;
  padding-top: 16px;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* bin修改 */
.list-content{
  width: 1200px;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list-left{
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
}
.list-nav{
  position: relative;
  width: 120px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  margin-bottom: 4px;
  color: rgb(102, 102, 102);
  background: rgb(229, 229, 229);
  cursor: pointer;
}
.list-nav:hover{
  color: #fff;
  background: #dd4250;
}
.left_angle{
  opacity: 0;
  position: absolute;
  top: 50%;
  right: -20px;
  margin-top: -10px;
  width: 0;
  border: 10px solid;
  border-color: transparent transparent transparent #dd4250;
}
.left_angle2{
  opacity: 0;
  position: absolute;
  top: 50%;
  left: -20px;
  margin-top: -10px;
  width: 0;
  border: 10px solid;
  border-color: transparent #dd4250 transparent transparent;
}
.list-nav:hover .left_angle{
  opacity: 1;
}
.list-nav:hover .left_angle2{
  opacity: 1;
}
.angel-click{
  opacity: 1;
}
.nav-click{
  color: #fff;
  background: #dd4250;
}
.list-right{
  width: 900px;
  height: 565px;
  overflow: hidden;
  overflow-y: auto;
  margin: 0 20px;
  padding-bottom: 20px;
  background: #fff;
  border: 1px #ebebeb solid;
}
.list-item-img img{
  width: 200px;
  height: 100px;
  margin: 10px;
}
.list-item-right{
  padding-left: 15px
}
.list-right::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  .list-right::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow   : inset 0 0 5px #e5e5e5;
  background   : #535353;
  }
  .list-right::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px #e5e5e5;
  border-radius: 5px;
  background   : #ededed;
  }
.list-item{
  width: 95%;
  margin: 20px auto;
  cursor: pointer;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  box-shadow:0px 0px 20px rgba(83, 108, 187, 0.1);
}
.list-item-title{
  font-size: 18px;
  font-weight: 600;
  color: #343434;
  padding-bottom: 10px;
}
.list-item-intro{
  padding-right: 20px;
  color: #9a9a9a;
  line-height: 1.3;
}
/* bin修改结束 */
.box1-btn{
  cursor:pointer
}
.page{
    width: 610px;
    border-top: 2px solid #eeeeee;
    margin: auto;
    padding: 12px 0 20px 0;
    text-align: center;
}
.pagea.page{
  margin:0 auto 30px;
}
.list .page{
  margin-top: 40px;
}
.page .a{
    padding: 0 13px;
    margin: 0 4px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    color: #666;
    border: 1px solid #ccc;
    display: inline-block;
    border-radius: 4px;
}
.page input{
    width: 50px;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid #E6E6E6;
    font-size: 14px;
    text-align: center;
}
.page .a.on{
    background: #BE475D;
    color: #fff;
}
</style>
<style>
.service-title{
  padding: 36px 0;
  text-align: center;
  color: #5E9F8E;
}
.service-title h2{
  font-size: 36px;
  line-height: 52px;
}
.service-title p{
  font-size: 14px;
  line-height: 24px;
  text-transform:uppercase;
}
</style>